<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" href="/cms/css/font.css">
  <link rel="stylesheet" href="/cms/css/xadmin.css">
  <link rel="stylesheet" href="/cms/layui/css/layui.css">
  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="layui-anim layui-anim-up">

<div class="demoTable" style="margin: 20px 0 0 3%;">
  搜索：
  <div class="layui-inline">
    <input class="layui-input" name="email" id="email" placeholder="请输入文章标题" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload">搜索</button>

</div>
<table id="apply" lay-filter="test"></table>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


</div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script src="/cms/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/cms/js/xadmin.js"></script>


<script>
  layui.use('table', function () {
    var table = layui.table;
    table.render({
      elem: '#apply'
      , height: 500
      , even: true
      , url: '/cms/article/data'
      , response: {
        statusName: 'code' //规定数据状态的字段名称，默认：code
        , statusCode: 200 //规定成功的状态码，默认：0
        , msgName: 'msg' //规定状态信息的字段名称，默认：msg
        , countName: 'total' //规定数据总数的字段名称，默认：count
        , dataName: 'data' //规定数据列表的字段名称，默认：data
      }
      , page: true
      , cols: [
        [{field: 'id', title: '文章标识'}

          , {field: 'articleName', title: '文章名称'}
          , {field: 'email', title: '作者邮箱'}
          , {field: 'author', title: '作者'}
          , {field: 'zhaiYao', title: '摘要'}
          , {field: 'status', title: '状态'}
          , {
          field: 'createTime', title: '创建时间', templet: function (row) {
            return createTime(row.createTime);
          }
        }
          , {
          field: 'updateTime', title: '更新时间', templet: function (row) {
            return createTime(row.updateTime);
          }
        }
          , {fixed: 'right', title: '操作', toolbar: '#barDemo'}

        ]
      ],
      done: function (res, curr, count) {
        $("[data-field='status']").children().each(function () {
          if ($(this).text() == 2) {
            $(this).text('禁用中');
          } else if ($(this).text() == 1) {
            $(this).text('使用中');
          }
        });
      },
      id: 'applyReload'
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') {
        var url = '/cms/article/detail?articleId=' + data.id;
        x_admin_show("编辑信息", url)
      }else if(obj.event === 'del'){
        layer.confirm('确定删除吗？', function(index){
          $.ajax({
            url: "/cms/article/delete?articleId="+ data.id,
            success: function (msg) {
              if (msg.code == 200) {
                //删除这一行
                obj.del();
                //关闭弹框
                layer.close(index);
                layer.msg("删除成功", {icon: 6});
              } else {
                layer.msg("删除失败", {icon: 5});
              }
            }
          });
          return false;
        });
      }
    });


    var $ = layui.$, active = {
      reload: function () {
        var email = $('#email');
        //执行重载
        table.reload('applyReload', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          , where: {
            articleName: email.val()
          }
        }, 'data');
      }
    };

    $('.demoTable .layui-btn').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

  });
</script>
<script type="text/javascript">
  function createTime(v) {
    var date = new Date(v);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    var d = date.getDate();
    d = d < 10 ? ("0" + d) : d;
    var h = date.getHours();
    h = h < 10 ? ("0" + h) : h;
    var M = date.getMinutes();
    M = M < 10 ? ("0" + M) : M;
    var str = y + "-" + m + "-" + d + " " + h + ":" + M;
    return str;
  }
</script>
</body>

</html>